<template>
  <dev class="page">
    <div class="panel">
      <div class="left">
        <img src="../../assets/login/logo.png" class="logo">
        <img src="../../assets/login/big.png" class="big">
      </div>
      <div class="right">
        <div class="title-container">
          <h2>神州大健康体检系统</h2>
          <span>V1.0</span>
        </div>
        <div v-if="!qr.qrCodeVisible">
          <div class="row">
            <el-input v-model="loginForm.username" placeholder="用户名"
                      prefix-icon="user" size="large" clearable/>
          </div>
          <div class="row">
            <el-input v-model="loginForm.password" placeholder="密码"
                      prefix-icon="lock" size="large" clearable/>
          </div>
          <div class="row">
            <el-button type="primary" class="btn" size="large"
                       @click="login">
              登录系统
            </el-button>
          </div>
          <div class="row">
            <a class="link">二维码登录</a>
          </div>
        </div>
        <div v-if="qr.qrCodeVisible">
          <div class="qrCode-container">
            <img :src="qr.qrCode" height="153" class="qrCode">
            <img src="../../assets/login/phone.png" height="148">
          </div>
          <div class="row"><a class="link">用户名密码登录</a></div>
        </div>
      </div>
    </div>
  </dev>
</template>

<script setup lang="ts">
import {getCurrentInstance, reactive} from "vue";
import {isPassword, isUsername} from "../../utils/validate.ts";
import router from "../../router";

const {proxy} = getCurrentInstance();
const loginForm = reactive({
  username: null,
  password: null
})
const qr = reactive({
  qrCodeVisible: false,
  qrCode: '',
  uuid: null,
  qrCodeTime: null,
  loginTimer: null
})

function login() {
  if (!isUsername(loginForm.username)) {
    proxy.$message({
      message: '用户名不正确',
      type: 'error',
      duration: 1200
    })
  } else if (!isPassword(loginForm.password)) {
    proxy.$message({
      message: '密码不正确',
      type: 'error',
      duration: 1200
    })
  } else {
    const data = {
      username: loginForm.username,
      password: loginForm.password
    };
    proxy.$http("/mis/user/login", "POST", data, true, resp => {
      if (resp.result) {
        const permissions = resp.permissions;
        const token = resp.token;
        localStorage.setItem('permissions', permissions);
        localStorage.setItem('token', token);
        proxy.$message({
          message: '登录成功',
          type: 'success',
          duration: 1200
        })
        router.push({name: "MisHome"});
      } else {
        proxy.$message({
          message: '登录失败',
          type: 'error',
          duration: 1200
        })
      }
    })
  }
}
</script>

<style lang="less" scoped="scoped">
@import "login.less";
</style>
